<template>
  <div>
    <div class="table-header clear-fix">
      <ButtonGroup>
        <Button @click="removeDialog(row, index)">新建角色</Button>
        <Button @click="openDialog('update', row)">修 改</Button>
      </ButtonGroup>
    </div>
    <Table :data="roles" :loading="loading" :columns="columns">
      <template slot-scope="{row, index, column}" slot="user">
        <user-card></user-card>
      </template>
      <template slot="action" slot-scope="{row, index, column}">
        <ButtonGroup>
          <Button @click="removeDialog(row, index)">删除</Button>
          <Button @click="openDialog('update', row)">修改</Button>
        </ButtonGroup>
      </template>
      <template slot="permission" slot-scope="{row, index, column}">
        <!-- <permission-card :permissions="row.permissions" /> -->
      </template>
    </Table>
    <Modal v-model="removeVisible" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请确认是否删除？</span>
      </p>
      <div slot="footer">
        <Button type="error" size="large" long @click="remove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const columns = [
      {
        title: "角色名",
        key: "rolename"
      },
      {
        title: "权限",
        slot: "permission"
      },
      {
        title: "创建时间",
        key: "createdAt"
      },
      {
        title: "最后更新时间",
        key: "updatedAt"
      },
      {
        title: "创建人",
        slot: "user"
      },
      {
        title: "操作",
        slot: "action"
      }
    ];
    return {
      columns
    };
  }
};
</script>

<style>
</style>
